<template>
    <div>
        <el-page-header @back="goBack" content="设置销售单字段"></el-page-header>
        <div class="common_line"></div>
        <div class="setting_view">
            <div class="common">
                <div class="title">公共字段（不可更改）</div>
                <div class="fileds">
                    <div class="item" v-for="item in commonFileds" :key="'common_'+item.id">
                        <span>{{ item.name }}</span>
                        <el-switch v-model="item.selected" disabled active-color="#068CEE"></el-switch>
                    </div>
                </div>
            </div>
            <div class="common">
                <div class="title">常用字段</div>
                <el-form :model="formData" class="fileds" label-width="auto">
                    <div class="item" style="margin-bottom: 0;" v-for="item in oftenUsedFileds" :key="'often_'+item.id" > 
                        <el-form-item :label="item.name">
                            <el-switch v-model="formData[item.filedName]" active-color="#068CEE"></el-switch>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <div class="common">
                <div class="title">自定义字段</div>
                <el-form :model="formData" class="custom_fileds" label-width="auto">
                    <div class="item" style="margin-bottom: 0;" v-for="item in customFileds" :key="'custom_'+item.id" > 
                        <el-form-item :label="item.name">
                            <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
                                <el-input v-model="fieldForm[item.filedName]" placeholder="请输入字段名"></el-input>
                                <el-switch v-model="formData[item.formName]" active-color="#068CEE"></el-switch>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="common_line"></div>
        
        <bottom-btns
            Width="90%"
            MarginTop="20px"
            :buttons="buttonList"
            @superBtnClick="handleButtonClick"
        ></bottom-btns>
    </div>
</template>

<script>
import { getOrderSet, setOrderField, updateOrderField } from '@/api/order';
import bottomBtns from "@/components/bottomBtns";

export default {
    name: 'setOrder',
    components: {
        bottomBtns
    },
    data() {
        return {
            corp: '',
            commonFileds: [],  //公共字段，不可更改
            oftenUsedFileds: [],   //常用字段
            customFileds: [],   //自定义字段
            formData: {
                delivery_address: 0,
                builder: 0,
                sale: 0,
                rebates: 0,
                payment_discount: 0,
                set1: 0,
                set2: 0,
                set3: 0,
                set4: 0,
                set5: 0,
                set6: 0,
                set7: 0,
                set8: 0,
                set9: 0,
                set10: 0,
                corp: ''
            },
            fieldForm: {
                name1: '',
                name2: '',
                name3: '',
                name4: '',
                name5: '',
                name6: '',
                name7: '',
                name8: '',
                name9: '',
                name10: ''
            },
            setId: '',
            buttonList: [
                { name: '保存', type: 'commit', id:'1' },
                { name: '取消', type: 'cancel', id:'2' }
            ]
        }
    },
    props: {
        corpId: {
            type: Number
        }
    },
    mounted() {
        this.corp = this.corpId
        this.initData()
    },
    methods: {
        goBack() {
            this.$emit('hidden', '')
        },
        initData() {
            // 数据转换，0、1 转 true、false
            function handleDic(dic) {
                for (let key in dic) {
                    if (dic[key] === 1){
                        dic[key] = true
                    }else if (dic[key] === 0) {
                        dic[key] = false
                    }
                }
                return dic
            }
            getOrderSet({corp: this.corp}).then(res => {
                let list = res.data.data.set_order_list
                if (list.length){
                    this.formData = handleDic(list[0])
                    this.setId = list[0].id
                    this.formData.remark = true

                    let set_field_name = handleDic(this.formData.set_field_name)
                    if (!set_field_name){
                        return
                    }
                    for (let i = 1; i < 11; i++) {
                        this.fieldForm['name'+i] = set_field_name['name'+i]
                    }
                }else{
                    this.setId = null
                }
            })
            this.commonFileds = [
                {id: 1, name: '选择客户', selected: true},
                {id: 2, name: '开单价格', selected: true},
                {id: 3, name: '销售商品', selected: true},
                {id: 4, name: '开单日期', selected: true},
                {id: 5, name: '经办人', selected: true},
                {id: 6, name: '备注', selected: true}
            ]
            this.oftenUsedFileds = [
                {id: 1, name: '联系地址', filedName:'delivery_address', selected: false},
                {id: 2, name: '施工人员', filedName:'builder',  selected: false},
                {id: 3, name: '销售人员', filedName:'sale',  selected: false},
                {id: 4, name: '返点/红包', filedName:'rebates',  selected: false},
                {id: 5, name: '结款优惠', filedName:'payment_discount',  selected: false}
            ]
            this.customFileds = []
            for (let index = 1; index < 11; index++) {
                this.customFileds.push({
                    id: index,
                    name: '自定义字段'+index,
                    filedName: 'name'+index,
                    formName: 'set'+index,
                    selected: false
                })
            }
        },
        handleButtonClick(item) {
            switch (item.id) {
                case '1':   // 保存
                    this.beforeCommit()
                    break;
                case '2':   // 取消
                    this.goBack()
                    break;
            
                default:
                    break;
            }
        },
        beforeCommit() {
            let flag = false
            for (let index=1; index<11; index++) {
                if (this.formData['set'+index] && !this.fieldForm['name'+index]){
                    this.$message.error('请输入自定义字段'+index+'的字段名')
                    flag = true
                    break
                }
            }
            if (flag) return;
            
            for(let item in this.fieldForm) {
                let val = this.fieldForm[item]
                if (!val){
                    delete this.fieldForm[item]
                }
            }
            this.formData.set_field_name = this.fieldForm

            let that = this
            this.$confirm('您确定要保存该设置吗？设置完成后开单界面将会显示选中字段。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                that.commit()
            }).catch(() => {})
        },
        commit() {
            // 数据转换，true、false 转 0、1
            function handleDic(dic) {
                for (let key in dic) {
                    if (dic[key] === true){
                        dic[key] = 1
                    }else if (dic[key] === false) {
                        dic[key] = 0
                    }
                }
                return dic
            }

            this.formData = handleDic(this.formData)

            let temp = null
            if (this.setId){  //编辑
                temp = updateOrderField(this.formData)
            }else{
                temp = setOrderField(this.formData)
            }
            temp.then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '销售单字段设置成功',
                        type: 'success'
                    });
                    this.goBack()
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
    .setting_view {
        .common {
            padding-bottom: 20px;
            .title {
                font-size: 14px;
                font-weight: bold;
                padding-bottom: 20px;
            }
            .fileds {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                // justify-content: space-between;
                font-size: 14px;
                width: 100%;
                .item {
                    width: 15%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 15px;
                    margin-right: 18%;
                }
            }
            .custom_fileds {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                font-size: 14px;
                width: 100%;
                .item {
                    width: 30%;
                    display: inline-flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-bottom: 15px;
                    margin-right: 20%;
                }
            }
        }
    }
</style>

<style>
.setting_view .el-form-item {
    margin-bottom: 0;
    width: 100%;
}
.setting_view .el-form-item__content {
    text-align: right;
}
.setting_view .el-input {
    width: 130px;
}
.setting_view .el-input__inner {
    height: 30px;
}
</style>